<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水库信息管理系统</title>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="css/head.css"/>
    <link rel="stylesheet" type="text/css" href="css/simple.css"/>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <!--<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>-->

    <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!--<script type="text/javascript" src="js/jquery.min.js"></script>-->
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <!--<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>-->

</head>
<body>
<div id="main" style="background: #FFFFFF">
    <div class="all_table">
        <div class="table_title">
            <span>供水水质监测</span>
        </div>
        <div style="height: 2px; width: 100%; background: #dae9f4;"></div>
        <div id="first_table">
            <table style="text-align: right; float: left;">
                <tr>
                    <td style="font-size: 16px; font-weight: bold;">选择水厂:</td>
                    <td>
                        <select>
                            <option value ="">第一水厂</option>
                            <option value ="">第二水厂</option>
                            <option value ="">第三水厂</option>
                            <option value ="">第四水厂</option>
                        </select>
                    </td>
                    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                    <td style="font-size: 16px; font-weight: bold;">选择日期:</td>
                    <td>
                        <select id="birth_year" onchange="setDays(this,birth_month,birth_day);">
                            <option value="">年</option>
                        </select>
                        <select id="birth_month" onchange="setDays(birth_year,this,birth_day);">
                            <option value="">月</option>
                        </select>
                        <select id="birth_day">
                            <option value="">日</option>
                        </select>
                    </td>
                 </tr>
                <tr>
            </table>
            <div style="float: right;">
                <button style="margin-bottom: 20px" type="button" class="btn btn-info" id="close_right_tip">查询</button>
            </div>
        </div>
        <div id="second_table">
            <table  class="table table-bordered">
                <thead>
                <tr>
                    <th class="table_bg_one">水厂</th>
                    <th class="table_bg_one">检测时间</th>
                    <th class="table_bg_one">浊度监测</th>
                    <th class="table_bg_one">溶解氧</th>
                    <th class="table_bg_one">PH值</th>
                    <th class="table_bg_one">温度</th>
                    <th class="table_bg_one">电导率</th>
                    <th class="table_bg_one">余氯</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>XX水厂</td>
                    <td>2017年1月1日</td>
                    <td>50%</td>
                    <td>50</td>
                    <td>6.0</td>
                    <td>18℃</td>
                    <td>2</td>
                    <td>0.001</td>
                </tr>
                <tr>
                    <td>XX水厂</td>
                    <td>2017年1月1日</td>
                    <td>50%</td>
                    <td>50</td>
                    <td>6.0</td>
                    <td>18℃</td>
                    <td>2</td>
                    <td>0.001</td>
                </tr>
                <tr>
                    <td>XX水厂</td>
                    <td>2017年1月1日</td>
                    <td>50%</td>
                    <td>50</td>
                    <td>6.0</td>
                    <td>18℃</td>
                    <td>2</td>
                    <td>0.001</td>
                </tr>
                <tr>
                    <td>XX水厂</td>
                    <td>2017年1月1日</td>
                    <td>50%</td>
                    <td>50</td>
                    <td>6.0</td>
                    <td>18℃</td>
                    <td>2</td>
                    <td>0.001</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div style="float: right; margin: 20px;">
        <ul class="pagination">
            <li><a href="#">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </div>

</div>

</body>
<script>
    $(document).ready(function() {
        var i = -1;
        // 添加年份，从1910年开始
        for (i = 1910; i <= new Date().getFullYear(); i++) {
            addOption(birth_year, i, i - 1909);
            /*// 默认选中1988年
             if (i == 1988) {
             birth_year.options[i-1910].selected = true;
             }*/
        }
        // 添加月份
        for (i = 1; i <= 12; i++) {
            addOption(birth_month, i, i);
        }
        // 添加天份，先默认31天
        for (i = 1; i <= 31; i++) {
            addOption(birth_day, i, i);
        }



        //$("#birth_month"). birth_year  birth_day
    });


    // 设置每个月份的天数
    function setDays(year, month,day) {
        var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        var yea = year.options[year.selectedIndex].text;
        var mon = month.options[month.selectedIndex].text;
        var num = monthDays[mon - 1];
        if (mon == 2 && isLeapYear(yea)) {
            num++;
        }
        for (var j = day.options.length - 1; j >=num; j--) {
            day.remove(j);
        }
        for (var i = day.options.length; i <= num; i++) {
            addOption(birth_day,i,i);
        }
    }

    // 判断是否闰年
    function isLeapYear(year)
    {
        return (year % 4 == 0 || (year % 100 == 0 && year % 400 == 0));
    }

    // 向select尾部添加option
    function addOption(selectbox, text, value) {
        var option = document.createElement("option");
        option.text = text;
        option.value = value;
        selectbox.options.add(option);
    }
</script>

</html>